<template>
  <el-dialog title="酒店新建" :visible.sync="visible">
    <el-form :model="saveForm" :rules="rules" label-width="100px" ref="elForm">
      <el-form-item label="酒店名称" prop="title">
        <el-input v-model="saveForm.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="商业区" prop="businessDistrict">
        <el-input
          v-model="saveForm.businessDistrict"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="saveForm.address" autocomplete="off"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="经度" prop="lon">
            <el-input v-model="saveForm.lon" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="saveForm.lat" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="城市" prop="lat">
            <el-input v-model="saveForm.city" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格" prop="price">
            <el-input
              v-model="saveForm.price"
              autocomplete="off"
              type="number"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="星级" prop="star">
            <el-radio-group v-model="saveForm.star">
              <el-radio label="1星级">1星级</el-radio>
              <el-radio label="2星级">2星级</el-radio>
              <el-radio label="3星级">3星级</el-radio>
              <el-radio label="4星级">4星级</el-radio>
              <el-radio label="5星级">5星级</el-radio>
              <el-radio label="6星级">6星级</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否满了" prop="fullRoom">
            <el-radio v-model="saveForm.fullRoom" :label="true">是</el-radio>
            <el-radio v-model="saveForm.fullRoom" :label="false">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="印象" prop="impression">
        <el-input v-model="saveForm.impression" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="好评率" prop="favourablePercent">
        <el-input
          v-model="saveForm.favourablePercent"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="pic">
        <el-input v-model="saveForm.pic" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onSaveForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addHotel, getHotel, saveHotel } from "@/api/hotel";
export default {
  data() {
    return {
      visible: false,
      saveForm: {
        id: null,
      },
      rules: {
        title: [{ required: true, message: "酒店名称必填" }],
        priNum: [{ required: true, message: "分片数必填" }],
        repliNum: [{ required: true, message: "副本分片数必填" }],
      },
    };
  },
  methods: {
    init(id, isDetail) {
      this.saveForm.id = id || null;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        if (this.saveForm.id) {
          this.$refs["elForm"].resetFields();
          // 发请求获取数据
          getHotel(this.saveForm.id).then((res) => {
            this.saveForm = res.data;
          });
        }
      });
    },
    onSaveForm() {
      const _self = this;
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (_self.saveForm.id) {
            saveHotel(_self.saveForm).then((res) => {
              if (res.code == 20000) {
                this.$message({
                  message: res.data,
                  type: "success",
                });
                _self.visible = false;
                this.$emit("refresh");
              }
            });
          } else {
            addHotel(_self.saveForm).then((res) => {
              if (res.code == 20000) {
                this.$message({
                  message: res.data,
                  type: "success",
                });
                _self.visible = false;
                this.$emit("refresh");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>